<template>
	<div> 
		
		<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
		<div class="container">
			<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
				:delFunc="handleDelete" :editFunc="handleEdit" :refresh="getData" :currentPage="page.index"
				:changePage="changePage">
				<template #toolbarBtn>
					<el-button type="warning" :icon="CirclePlusFilled" @click="editVisible = true">新增</el-button>
				</template>
				<template #type="{rows,index}">
					<el-tag type="success" v-if="rows.type==1">管理员</el-tag>
					<el-tag type="warning" v-else>教师</el-tag>
				</template>
			</TableCustom>

		</div>


		<el-dialog :title="isEdit ? '编辑' : '新增'" v-model="editVisible" width="700px" destroy-on-close
			:close-on-click-modal="false" @close="closeEditDialog">
			<TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="editOk">
				<template #thumb="{ rows }">
					<img class="table-td-thumb" :src="rows.thumb"></img>
				</template>
			</TableEdit>
		</el-dialog>


		<el-dialog title="查看详情" v-model="viewVisible" width="700px" destroy-on-close>
			<TableDetail :data="viewData">
				<template #thumb="{ rows }">
					<el-image :src="rows.thumb"></el-image>
				</template>
			</TableDetail>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage, } from 'element-plus';
import { CirclePlusFilled } from '@element-plus/icons-vue';
import { fetchData,fetchTeacherData,insertTeacherData,deleteTeacherData,updateTeacherData,getAllColleges } from '@/api/index';
import TableCustom from '@/components/table-custom.vue';
import TableDetail from '@/components/table-detail.vue';
import TableSearch from '@/components/table-search.vue';
import { TableItem } from '@/types/table';
import { FormOption, FormOptionList } from '@/types/form-option';

const query = reactive({
	name: null,
	tid:null,
	college_id:null
});

const searchOpt = ref<FormOptionList[]>([
	{ type: 'input', label: '姓名：', prop: 'name' },
	{ type: 'number',label: '教师号', prop: 'tid'},
	{ type: 'number',label: '学院号', prop: 'college_id' }
])
const handleSearch = () => {
	changePage(1);
};

// 基本信息
const teacherInfo = [
	{ prop: 'name', label: '姓名' },
	{ prop: 'teacher_id', label: '教师号' },
	{ prop: 'gender', label: '性别' },
	{ prop: 'collegeName', label: '学院' },
	{prop:'type',label:'权限'}
]
let columns = ref([
	{ type: 'index', label: '序号', width: 55, align: 'center' },
	...teacherInfo,
	{ prop: 'operator', label: '操作', width: 250 }
])
// 新增/编辑弹窗相关
let options = ref<FormOption>({
	labelWidth: '100px',
	span: 24,
	list: [
		{ type: 'input', label: '姓名', prop: 'name', required: true },
		{ type: 'number', label: '教师号', prop: 'teacher_id', required: true },
		{ type: 'select', label: '性别', prop: 'gender', required: true ,opts:[{label:'男',value:'男'},{label:'女',value:'女'}] },
		{ type: 'number', prop: 'college_id', label: '学院id' ,required:true},
	]
})


const page = reactive({
	index: 1,
	size: 10,
	total: 200,
})
const changePage = async (val: number) => {
	const res = await fetchTeacherData({index:val,size:page.size},query)
	res.data.pageList.forEach(item=>{
		item.collegeName=item.college.name+'('+item.college.college_id+')';
	})
	tableData.value = res.data.pageList;
	page.total = res.data.pageNumber;
	page.index = val;
};



const tableData = ref<TableItem[]>([]);
const getData = async () => {
	changePage(1)
	
};
getData();

const insertData = (data) =>{
	closeEditDialog();
	insertTeacherData(data).then(()=>{
		getData();
		ElMessage.success('新增成功');
	}).catch(
	()=>{
		ElMessage.error('新增失败');
	})
}
const updateData = (data) =>{
	closeEditDialog();
	updateTeacherData(data).then(()=>{
		getData();
		ElMessage.success('更新成功');
	}).catch(
	()=>{
		ElMessage.error('更新失败');
	})
}
const editOk=(data)=>{
	data.college={}
	data.college.college_id=data.college_id;
	if(isEdit.value){
		updateData(data)
	}else{
		insertData(data)
	}
}
// 删除相关
const handleDelete = async (row) => {
	deleteTeacherData(row.teacher_id).then(()=>{
		ElMessage.success('删除成功');
		getData();
	},
	(err)=>{
		ElMessage.error(err.response.data);
	})
}

//编辑弹窗
const editVisible = ref(false);
const isEdit = ref(false);
const rowData = ref({});
const handleEdit = (row) => {
	rowData.value = { ...row };
	isEdit.value = true;
	editVisible.value = true;
};
const closeEditDialog = () => {
	editVisible.value = false;
	isEdit.value = false;
};

// 查看详情弹窗相关
const viewVisible = ref(false);
const viewData = ref({
	row: {},
	list: []
});
const handleView = (row) => {
	viewData.value.row = { ...row }
	viewData.value.list = teacherInfo
	viewVisible.value = true;
};


</script>

<style scoped>

</style>
